<template>
  <div class="detail-container">
    <el-card class="detail-card">
      <!-- 返回按钮 -->
      <div class="back-header">
        <el-button link type="primary" @click="handleBack" class="back-button">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
      </div>

      <!-- 详情标题 -->
      <div class="detail-header">
        <h2>菌株详细信息 - {{ strainData.strain_number }}</h2>
      </div>

      <!-- 详细信息表格 -->
      <div class="detail-table">
        <el-table
            :data="displayData"
            border
            style="width: 100%"
            :show-header="false"
        >
          <el-table-column prop="label" width="200" align="left" />
          <el-table-column prop="value" align="left">
            <template #default="{ row }">
              <span v-if="isItalicField(row.label)" style="font-style: italic;">
                {{ row.value || '无' }}
              </span>
              <span v-else>
                {{ row.value || '无' }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ArrowLeft } from '@element-plus/icons-vue';

const route = useRoute();
const router = useRouter();

// 菌株数据接口
interface StrainData {
  strain_number: string | null;
  preservation_number: string | null;
  family_name: string | null;
  genus_name: string | null;
  species_name: string | null;
  chinese_latin_species_name: string | null;
  collection_location: string | null;
  isolation_source: string | null;
  collector: string | null;
  isolation_date: string | null;
  strain_function: string | null;
  reference_sequence: string | null;
  reference_genome: string | null;
  ncbi_similar_strain: string | null;
  ncbi_accession_number: string | null;
  similarity_ncbi: string | null;
  ez_similar_strain: string | null;
  ez_accession_number: string | null;
  similarity_ez: string | null;
}

// 显示数据接口
interface DisplayItem {
  label: string;
  value: string | null;
  key: string;
}

// 菌株数据
const strainData = ref<StrainData>({
  strain_number: null,
  preservation_number: null,
  family_name: null,
  genus_name: null,
  species_name: null,
  chinese_latin_species_name: null,
  collection_location: null,
  isolation_source: null,
  collector: null,
  isolation_date: null,
  strain_function: null,
  reference_sequence: null,
  reference_genome: null,
  ncbi_similar_strain: null,
  ncbi_accession_number: null,
  similarity_ncbi: null,
  ez_similar_strain: null,
  ez_accession_number: null,
  similarity_ez: null
});

// 搜索表单数据
const searchForm = ref<any>({});

// 字段映射
const fieldLabels: { [key: string]: string } = {
  strain_number: '菌株编号',
  preservation_number: '保藏名称',
  family_name: '科名',
  genus_name: '属名',
  species_name: '种名',
  chinese_latin_species_name: '中文名称',
  collection_location: '采集地点',
  isolation_source: '分离源',
  collector: '分离人',
  isolation_date: '分离时间',
  strain_function: '潜在功能',
  reference_genome: '参考基因组',
  ncbi_similar_strain: 'NCBI近似菌株',
  ncbi_accession_number: 'NCBI菌株登录号',
  similarity_ncbi: 'NCBI菌株相似度',
  ez_similar_strain: 'EZBiocloud近似菌株',
  ez_accession_number: 'EZBiocloud菌株登录号',
  similarity_ez: 'EZBiocloud菌株相似度',
  reference_sequence: '参考序列',
};

// 需要斜体显示的字段
const italicFields = ['family_name', 'genus_name', 'species_name'];

// 判断字段是否需要斜体显示
const isItalicField = (label: string) => {
  const fieldKey = Object.keys(fieldLabels).find(key => fieldLabels[key] === label);
  return fieldKey ? italicFields.includes(fieldKey) : false;
};

// 计算显示数据
const displayData = computed(() => {
  const data: DisplayItem[] = [];

  Object.keys(fieldLabels).forEach(key => {
    data.push({
      label: fieldLabels[key],
      value: strainData.value[key as keyof StrainData],
      key: key
    });
  });

  return data;
});

// 返回按钮处理
const handleBack = () => {
  // 将搜索表单数据传递回搜索页面
  router.push({
    path: '/search/MicrobialSearch', // 根据你的实际路由路径调整
    query: {
      returnSearchForm: JSON.stringify(searchForm.value)
    }
  });
};

// 组件挂载时解析路由参数
onMounted(() => {
  try {
    // 解析菌株数据
    if (route.query.strainData) {
      strainData.value = JSON.parse(route.query.strainData as string);
    }

    // 解析搜索表单数据
    if (route.query.searchForm) {
      searchForm.value = JSON.parse(route.query.searchForm as string);
    }
  } catch (error) {
    console.error('解析路由参数失败:', error);
    // 如果解析失败，返回搜索页面
    router.push('/search/MicrobialSearch');
  }
});
</script>

<style scoped>
.detail-container {
  margin: 0 20px 20px 20px;
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  border-radius: 8px;
}

.detail-card {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.back-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.back-button {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-header {
  margin-bottom: 30px;
  text-align: center;
}

.detail-header h2 {
  color: #303133;
  font-size: 24px;
  margin: 0;
}

.detail-table {
  margin-top: 20px;
}

/* 移除表头相关样式，因为表头已隐藏 */
:deep(.el-table th) {
  display: none;
}

/* 第一列内容左对齐 */
:deep(.el-table .el-table__cell:first-child .cell) {
  text-align: left;
  padding-left: 16px;
  font-weight: 500;
  color: #303133;
}

/* 第二列内容左对齐 */
:deep(.el-table .el-table__cell:nth-child(2) .cell) {
  text-align: left;
  padding-left: 16px;
}

:deep(.el-table .el-table__cell) {
  padding: 12px 0;
}

:deep(.el-table .cell) {
  word-break: break-word;
}
</style>